i need that when I click on one block, it opens an input (already implemented), and another block get closed, please help. Here is my code: i've already realized onClick input appearing, but cant handle with other
function App() {
const [isChecked, setIsChecked] = useState(false)
const [isClosed, setIsClosed] = useState(false)
const handleCheck = () => {
setIsChecked(isChecked => !isChecked)
}
const handleClose = () => {
setIsClosed(isClosed => !isClosed)
}
return (
<div className="App">
<div onClick={handleCheck}>block one</div>
{isChecked &&
<input/>
}
<div onClick={handleClose}>block two</div>
{isClosed &&
<input/>
}
</div>
); }
import { useState } from "react"
export default function App() {
const [isChecked, setIsChecked] = useState(false)
const [isClosed, setIsClosed] = useState(false)
const handleCheck = () => {
setIsChecked(true)
setIsClosed(false)
}
const handleClose = () => {
setIsClosed(true)
setIsChecked(false)
}
return(
<div className="App">
<div onClick={handleCheck}>block one</div>
{isChecked &&
<input/>}
<div onClick={handleClose}>block two</div>
{isClosed &&
<input/>}
</div>
)
}
do this
function App() {
const [isChecked, setIsChecked] = useState(true)
const [isClosed, setIsClosed] = useState(true)
const handleCheck = () => {
setIsChecked(isChecked => !isChecked)
}
const handleClose = () => {
setIsClosed(isClosed => !isClosed)
}
return (
<div className="App">
<div onClick={handleClose}>block one</div>
{isChecked &&
<input/>
}
<div onClick={handleCheck}>block two</div>
{ isClosed &&
<input/>
}
</div>
); }
I've done my problem by myself. Here is my code:
import { useState } from "react"
export default function App() {
const [isChecked, setIsChecked] = useState(false)
const [isClosed, setIsClosed] = useState(false)
const handleCheck = () => {
setIsChecked(isChecked => !isChecked)
}
const handleClose = () => {
setIsClosed(isClosed => !isClosed)
}
return(
<div className="App">
{
isClosed ? null : <div onClick={handleCheck}>block one</div>
}
{isChecked &&
<input/>}
{
isChecked ? null : <div onClick={handleClose}>block two</div>
}
{isClosed &&
<input/>
}
</div>
)
}